import React from 'react';
import { useState, useEffect } from 'react'
import axios from 'axios';
const Father = () => {
    // 搜索的关键字
    const [keywords, setKeywordsFn] = useState('');
    // 学校数据列表数据
    const [schoollist, setSchoolListFn] = useState([])
    const [filterSchoolList, setFilterSchoolListFn] = useState([])
    // 定义一个count
    const [count, setCount] = useState(0);
    useEffect(() => {
        axios.get('https://api.i-lynn.cn/college').then(res => {
            setSchoolListFn(res.data.data.list1)
        })
    }, [])

    // console.log('执行');
    useEffect(() => {

        let newArr = schoollist.filter(item => {
            return item.school_name.includes(keywords)
        })
        setFilterSchoolListFn(newArr)
        console.log('newArr', newArr);
    }, [keywords, schoollist])


    return (
        <div>
            {/* 使用count 变量 */}
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>
            {/* 输入框部分 */}
            <p>
                <input placeholder='请输入关键字' value={keywords} onChange={(e) => {
                    setKeywordsFn(e.target.value)
                }} />
            </p>

            {/* 列表展示部分 */}
            <ul>
                {
                    filterSchoolList.map(item => <li key={item.id}>{item.school_name}</li>)
                }
            </ul>
        </div>
    );
}

export default Father;
